<template>
	<div style="display: flex;">
		<el-form-item style="padding-right: 10px;">
			<el-input v-model="keyword" placeholder="输入服务名称关键字" :suffix-icon="Search" />
		</el-form-item>
		<el-button type="primary" @click="onSearch">搜索</el-button>
		<el-button type="success" @click="$router.push({ name: 'combine_service' })">创建组合服务</el-button>
	</div>

	<el-table :data="showData" stripe style="width: 100%" :default-sort="{ prop: 'createTime', order: 'descending' }">
		<el-table-column prop="name" label="名称" sortable/>
		<el-table-column prop="description" label="描述" />
		<el-table-column prop="businessDataNeed" label="调用参数" />
		<el-table-column prop="serviceTaskNames" label="涉及服务" />
		<el-table-column prop="createTime" label="创建时间" sortable/>
		<el-table-column label="操作">
			<template #default="scope">
				<el-button title="编辑" type="primary" :icon="Edit" size="small" circle plain
					@click="onEdit(scope.row.name)" />
				<el-button title="创建实例" type="success" :icon="DArrowRight" size="small" circle plain
					@click="onInvoke(scope.row.name)"/>
				<el-button title="删除" type="danger" :icon="Delete" size="small" circle plain
					@click="onDelete(scope.row.name)" />
			</template>
		</el-table-column>
	</el-table>
</template>
  
<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue';
import { Search, Edit, DArrowRight, SwitchButton, Delete } from '@element-plus/icons-vue'
import { Success } from '../../util/message';
import Api from '../../util/axios';
import { ElMenuItem, ElMessageBox } from 'element-plus'
import { useService } from '../../stores/serviceStore';
import { useRouter } from 'vue-router';

const keyword = ref('')
const tableData = reactive<any[]>([])
const showData = reactive<any[]>([])
const router = useRouter()

const reload_service_list = async () => {
	await Api.post("queryDeployments").then((res: any) => {
		tableData.length = 0
		for (const key in res) {
			let temp = res[key]
			temp['name'] = key.substring(0, key.length - 5)
			temp['createTime'] = timestamp2str(temp['deploymentTime'])
			tableData.push(temp)
		}
		showData.length = 0
		showData.push(...tableData)
	})
}
onMounted(() => {
	reload_service_list()
})
const onSearch = () => {
	showData.length = 0
	console.log(tableData)
	let temp = tableData.filter(row => row.name.indexOf(keyword.value) != -1 || row.description.indexOf(keyword.value) != -1 )
	showData.push(...temp)
}
const onEdit = (service) => {
	router.push({ name: 'edit', query: { name: service } })
}
const onInvoke = (service) => {
	router.push({ name: 'combine_detail', query: { name: service } })
}
const onSwitch = (apiName, status) => {
	ElMessageBox.confirm(
		status ? '是否确定下线该服务？' : '是否确定下线该服务？',
		{
			confirmButtonText: '确定',
			cancelButtonText: '取消',
			type: 'warning',
		})
		.then(() => {
			Api.post(status ? 'online_api' : 'offline_api', {
				"apiName": apiName
			}).then((res: any) => {
				if (res.msg == 'success') {

					Success(status ? '上线成功' : '上线成功')
					reload_service_list()
				}
			})
		})
}
const onDelete = (name) => {
	ElMessageBox.confirm(
		'是否确定删除该服务？',
		{
			confirmButtonText: '确定',
			cancelButtonText: '取消',
			type: 'warning',
		})
		.then(() => {
			Api.post('deleteDeploymentByName', {
				"deploymentName": name + '.bpmn'
			}).then((res: any) => {
				Success('删除成功')
				reload_service_list()

			})
		})
}

const timestamp2str = (timestamp) => {
	let date = new Date(timestamp)
	let Y = date.getFullYear() + '-';
	let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
	let D = date.getDate() + ' ';
	let h = date.getHours() + ':';
	let m = date.getMinutes() + ':';
	let s = date.getSeconds();
	return Y + M + D + h + m + s
}
</script>